

import { useMemo, useState } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { Avatar } from 'antd';

import {
    message_wrapper,
    self,
    message_user_avator,
    message_info,
    message_info_top,
    message_info_bottom,
    message_user_info,
    message_send_time,
} from './index.module.css'
import { imgUrlDev } from '../../assets/js/tools'
import NormalMessage from './normalMessage';
import ChoseMessage from './choseMessage';
import { findEmoji } from '../../assets/js/emoji';

function MessageItem(props) {

    const { message, self_id, currentRoom } = props;
    const { avator, user_id, send_time, message_content, message_id } = message;
    const { message_type } = message;  // 系统消息属性

    const [systemMessage, setSystemMessage] = useState(false);
    const [being, setBeing] = useState(true);

    const messageName = useMemo(() => {
        if (currentRoom === 0) {
            setSystemMessage(true);
            return '系统消息';
        } else {
            setSystemMessage(false);
            return message.name;
        }
    }, [currentRoom, message.name]);


    function formatSendDate() {
        // 如果不是当天的信息则时间显示'年/月/日 时:分:秒',是当天信息仅显示'时:分:秒'
        const sendDate = new Date(send_time);
        const nowDate = new Date();
        const minute = sendDate.getMinutes();
        const second = sendDate.getSeconds();
        const exactTime = `${sendDate.getHours()}:${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`;
        if (sendDate.getDate() !== nowDate.getDate()) {
            return `${sendDate.getFullYear()}/${sendDate.getMonth() + 1}/${sendDate.getDate()} ${exactTime}`;
        }
        return `${exactTime}`;
    }
    function destroySelf() {
        setBeing(false);
    }

    return (
        being ? 
            <div className={`${self_id === user_id && !systemMessage ? self : message_wrapper}`}>
                <Link className={message_user_avator} to={{pathname: `/info/${user_id}`}} target="_blank">
                    <Avatar src={imgUrlDev(avator)} size={56} />
                </Link>
                <div className={message_info}>
                    <div className={message_info_top}>
                        <span className={message_user_info}>{messageName}</span>
                        <span className={message_send_time}>{formatSendDate()}</span>
                    </div>
                    <div className={message_info_bottom}>
                        {
                            message_type === '0' || !systemMessage ?
                                <NormalMessage  
                                    message_id={message_id} 
                                    message_content={findEmoji(message_content)} 
                                    messageStatus={message.status} 
                                    destroySelf={destroySelf} 
                                /> : message_type === '1' ? 
                                    <ChoseMessage 
                                        {...message}
                                    /> :
                                    ''
                        }
                    </div>
                </div>
            </div> : 
            ''
    )
}



function mapStateToProps(state) {
    return {
        self_id: state.user.id,
        currentRoom: state.currentRoom
    }
}
export default connect(
    mapStateToProps,
    {

    }
)(MessageItem);



